<template>
    <div class="notFound">
        <div class="notFound-wrapper">
            <div class="left">
                <h1>404</h1>
            </div>
            <div class="right">
                <h1><i class="fa fa-exclamation-triangle"></i></h1>
                <h3>页面不存在</h3>
                <p class="toHome" @click="toHome"><i class="fa fa-mail-reply"></i> 返回首页</p>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '../api/api';
    export default {
        data() {
            return {
                loading: true
            }
        },
        methods: {
            toHome(){
                location.href='http://'+location.host+'/#/';
            }
        }
    }
</script>

<style lang="scss" scoped>

    $color: #20a0ff;
    .notFound {
        width: 100%;
        height: 100%;
    }
    .notFound-wrapper {
        width: 800px;
        margin: auto;
        padding-top: 50px;
        display: flex;
        .left {
            width: 404px;
            h1 {
                font-size: 100px;
                color: $color;
                padding-top: 20px;
                text-align: center;
            }
        }
        .right {
            padding-left: 50px;
            border-left: 2px solid $color;
            h1 {
                font-size: 60px;
                color: $color;
                padding-top: 20px;
                text-align: center;
                margin: 0;
            }
            .toHome {
                color: $color;
                cursor: pointer;
            }
        }
    }


</style>